﻿@page "/chart/pareto"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample illustrates a pareto chart with line and column series.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the pareto chart. The pareto chart is used to find the cumulative values of the data in different categories. It's a combination of the column and the line series. The initial values are shown in the column chart and the cumulative values are shown in the line chart.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the pareto series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/pare-to/'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Defect vs Frequency" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1" Title="Defects">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
            <ChartAxisMinorGridLines Width="0"></ChartAxisMinorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Frequency" Minimum="0" Maximum="150" Interval="30">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisMajorGridLines Width="1"></ChartAxisMajorGridLines>
            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
            <ChartAxisMinorGridLines Width="1"></ChartAxisMinorGridLines>
        </ChartPrimaryYAxis>
        <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" XName="DefectCategory" YName="Y" Name="Defect" Width="2" Type="ChartSeriesType.Pareto">
                <ChartMarker Visible="true" Height="10" Width="10">
                </ChartMarker>
            </ChartSeries>
        </ChartSeriesCollection>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<ParetoData> ChartPoints { get; set; } = new List<ParetoData>
    {
        new ParetoData { DefectCategory = "Traffic", Y = 56 },
        new ParetoData { DefectCategory = "Child Care", Y = 44.8 },
        new ParetoData { DefectCategory = "Transport", Y = 27.2 },
        new ParetoData { DefectCategory = "Weather", Y = 19.6 },
        new ParetoData { DefectCategory = "Emergency", Y = 6.6 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class ParetoData
    {
        public string DefectCategory { get; set; }
        public double Y { get; set; }
    }
}
